<template>
  <q-card class="tool-card-detail" :style="{
    width: width,
    height: height
  }">
    <q-card-section>
      <div>
        <div class="text-h6 ellipsis">
          <span>{{ data.name }}</span>
          <!-- <q-icon class="q-ml-sm" name="open_in_new">
            <q-tooltip content-class="bg-primary" :offset="[10, 10]">点击跳转页面</q-tooltip>
          </q-icon> -->
        </div>
      </div>
    </q-card-section>
    <q-separator/>
    <div class="column full-height">
      <div class="col q-px-md">
        <div class="row q-mt-md">
          <q-item-section avatar>
            <q-avatar color="primary" text-color="white" style="font-size: 80px">
              <img v-if="data.icon" :src="data.icon" alt="">
              <img v-else src="../../../public/logo/logo-51tixiao.png" alt="">
            </q-avatar>
          </q-item-section>
          <div class="col">
            <div class="q-mt-sm text-left tool-card-detail-description">{{ data.description }}</div>
            <q-card-actions class="cursor-pointer" align="left">
              <q-chip size="sm">点赞: {{ data.statistics.likeCount }}</q-chip>
              <q-chip size="sm">收藏: {{ data.statistics.collectionCount }}</q-chip>
              <q-chip size="sm">分享: {{ data.statistics.forwardCount }}</q-chip>
              <div class="block full-width"/>
              <tool-tag-chip v-for="tag in data.tags" :key="tag._id" :tag="tag"></tool-tag-chip>
            </q-card-actions>
          </div>
        </div>
      </div>

      <q-separator class="block full-width"/>

      <q-card-section class="q-py-auto" style="height:60px;">
        <q-btn
            fab
            color="secondary" icon="open_in_new" class="absolute" target="_blank"
            style="top: 0; right: 12px; transform: translateY(-50%);"
            @click="openLink({appData: data, id: data._id}, {module: 'apps', page: 'tool-card-detail', element: 'open-icon', event: 'click'})"
        />
        <div class="row no-wrap items-center">
          <!-- <div class="col text-h6 ellipsis">
            {{ data.name }}
          </div> -->
          <div class="col-auto text-grey text-caption q-my-auto row no-wrap items-center">
            网站速度
            <q-icon name="timer"/>
            250 ms
          </div>
        </div>
        <!-- <q-rating v-model="stars" :max="5" size="32px"/> -->
      </q-card-section>
      <q-separator/>
      <q-card-section horizontal v-if="!data">
        <q-card-section class="q-pt-xs">
          <a href="https://sspai.com/post/67331" target="_blank" class="q-link">
            <div class="text-overline">
              <q-chip dense size="sm">少数派</q-chip>
            </div>
            <div class="text-h6 q-mt-sm q-mb-xs text-black">macOS 如何限制 CPU 占用</div>
            <div class="text-caption text-grey">
              我们知道，其实苹果的 macOS 是一个半开半闭源的操作系统，大致来讲，GUI 部分是闭...
            </div>
          </a>
        </q-card-section>
        <q-card-section class="col-5 flex flex-center">
          <q-img
              class="rounded-borders"
              src="https://cdn.sspai.com/2021/06/20/36c5dd2634f620f5ade1749dfef1682c.jpg?imageMogr2/auto-orient/quality/95/thumbnail/!1420x708r/gravity/Center/crop/1420x708/interlace/1"
          />
        </q-card-section>
      </q-card-section>
      <q-card-actions class="row" style="height:68px;">

        <q-btn :loading="collectionLoading" flat color="secondary" icon="bookmark"
               :label="data.isCollection?'已在工作':'添加至工作台'"
               @click="handleCollection(data)">
          <q-tooltip anchor="top middle" v-if="!data.isCollection" content-class="bg-primary" :offset="[0, 30]">
            <span>点击可以加入个人收藏</span>
          </q-tooltip>
          <q-tooltip anchor="top middle" v-if="data.isCollection" content-class="bg-primary" :offset="[10, 30]">
            <span>已经收藏过咯，可以去个人空间看一下~</span>
          </q-tooltip>
        </q-btn>
        <q-space/>
        <q-btn flat color="info q-mr-none q-pa-none" icon="share" label="分享至">
          <div class="row q-ml-md q-pa-none">
            <div class="">
              <q-btn @click="goWeibo()" round>
                <q-avatar size="28px">
                  <img src="../../../public/logo/logo-weibo.png" alt=""/>
                </q-avatar>
              </q-btn>
            </div>
            <div class="q-ml-xs">
              <q-btn round>
                <q-avatar size="32px">
                  <img src="../../../public/logo/logo-wechat.png" alt=""/>
                </q-avatar>
                <q-tooltip class="bg-white">
                  <qrcode-vue :value="pageUrl" :size="120" level="M"/>
                </q-tooltip>
              </q-btn>
            </div>
          </div>
        </q-btn>
      </q-card-actions>
    </div>
    <q-inner-loading :showing="isLoading">
      <q-spinner-gears size="50px" color="primary"/>
    </q-inner-loading>
  </q-card>
</template>

<script lang="ts">

import ToolTagChip from './ToolTagChip.vue'
import { Tool } from 'src/store/tool/state'
import QrcodeVue from 'qrcode.vue'
// eslint-disable-next-line import/named
import AppActivityMixin from 'src/mixins/app-activity'
import { defineComponent, PropType } from 'vue'

export default defineComponent({
  name: 'ToolCardDetail',
  mixins: [AppActivityMixin],
  components: {
    ToolTagChip,
    QrcodeVue
  },
  props: {
    data: {
      type: Object as PropType<Tool>
    },
    width: {
      type: String,
      default: '320px'
    },
    height: {
      type: String,
      default: '240px'
    },
    hideTitle: Boolean
  },
  data () {
    return {
      stars: 5,
      isLoading: false,
      pageUrl: '',
      collectionLoading: false
    }
  },
  mounted () {
    this.pageUrl = location.href
  },
  methods: {
    async handleCollection (tool: Tool) {
      try {
        this.collectionLoading = true
        if (tool.isCollection) {
          await this.$store.dispatch('tool/removeToolCollection', this.data)
        } else {
          await this.$store.dispatch('tool/addToolCollection', this.data)
        }
      } finally {
        this.collectionLoading = false
      }
    },
    async goWeibo () {
      if (!this.data) return
      this.pageUrl = location.href
      const url = 'https://service.weibo.com/share/share.php' +
          '?appkey=666' +
          `&title=${encodeURIComponent(document.title)} ${this.data.name} ${this.data.description} 查看详情：` +
          `&url=${location.href}` +
          '&searchPic=false&style=simple' +
          `&pic=${this.data.icon}`
      window.open(url, '__blank')
    }
  }
})
</script>

<style lang="scss" scoped>
:root {
  --color1: rgb(0, 231, 255);
  --color2: rgb(255, 0, 231);
}

.tool-card-detail {
  display: inline-block;
  position: relative;
  overflow: hidden;
  vertical-align: middle;
  margin: 20px 10px;
  transform-origin: center;
  transform: translate3d(0, 0, -1px);
  transition: all 0.3s;
}

.tool-card-detail:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  opacity: .1;
  mix-blend-mode: screen;
  background-repeat: no-repeat;
  user-select: none;
  pointer-events: none;
}

.tool-card-detail-description {
  display: -webkit-box;
  overflow: hidden;
  // height: 94px;
  // font-size: 16px;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
}

</style>
